<template>
  <div :class="[getClass]">
    <div v-for="(item, i) in list" class="content-item hover" :class="{active: index === i}" @click="change(i)"><div class="panel-label" v-text="item.name"></div></div>
  </div>
</template>

<script>
  import { mapState, mapGetters } from 'vuex'
  import {Observer} from '../../core/util'
  import { MessageBox, Message } from 'element-ui'
  // 有序无序列表下拉框组件
  export default {
    props: ['config'],
    created: function () {
        var self = this;
        Observer.register('hidecloth', function () {
            self.show = false;
        });
        Observer.register(self.showList, function () {
            if (!window.editorId) return Message({
                message: $.i18n('messager_need_to_focus'),
                type: 'warning'
            });
            self.show = true;
            var value = UE.getEditor(window.editorId).queryCommandValue(self.cmd);
            for (var i = 0, len = self.list.length; i < len; i++) {
                if (self.list[i].value === value) break;
            }
            self.index = i === len ? -1 : i;
            Observer.fire('showcloth');
        });
    },
    data: function () {
        return {
            show: false,
            index: -1,
            list: this.config.list,
            cmd: this.config.cmd,
            showList: this.config.showList,
            classList: this.config.classList
        }
    },
    computed: {
        getClass: function () {
            return this.show ? this.classList : this.classList.concat('hide');
        }
    },
    methods: {
        change: function (i) {
            this.show = false;
            Observer.fire('execCommand', [this.cmd, this.list[i].value]);
            Observer.fire('hidecloth');
        }
    }
  }
</script>